Vue.component('qfTable',{
    props: {
        columns: {
            type: Array,
            required: true,
        },
        data: {
            type: Array,
            required: true,
        }
    },
    template:`<table border="1" cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th v-for="thItem in columns">{{thItem.title}}</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="trItem in data">
            <td v-for="thItem in columns">
               <template v-if="thItem.render">
                    <span v-html=thItem.render(trItem)></span>
               </template>
               <template v-else="thItem.render">
                    {{trItem[thItem.key]}}
               </template>
            </td>
        </tr>
    </tbody>
</table>`
})